<template>
	<view>

		<image class="banner" src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3017043847,2050172372&fm=26&gp=0.jpg"
		 mode=""></image>
		<view class="container">
			<view class="room-info">
				<view class="room-type">
					{{roomDetail.roomName}}
				</view>
				<view class="price">
					<view class="l">
						<text>￥</text>
						<text>{{roomDetail.roomPrice}}</text>
					</view>
					<view class="r">
						剩余{{roomDetail.num}}间
					</view>
				</view>
				<view class="infos">
					<!-- 床 -->
					<view class="infos-item">
						<image src="../../static/img/14.png" mode=""></image>
						<text>{{roomDetail.bedSize}}</text>
					</view>
					<!-- 人数 -->
					<view class="infos-item">
						<image src="../../static/img/20.png" mode=""></image>
						<text>{{roomDetail.person}}</text>
					</view>
					<!-- 房间大小 -->
					<view class="infos-item">
						<image src="../../static/img/19.png" mode=""></image>
						<text>{{roomDetail.roomSize}}㎡</text>
					</view>
					<!-- 是否有窗户 -->
					<view class="infos-item">
						<image src="../../static/img/15.png" mode=""></image>
						<text v-if="roomDetail.isWindow == 2">有窗</text>
						<text v-if="roomDetail.isWindow == 1">无窗</text>
					</view>
					<!-- 楼层 -->
					<view class="infos-item">
						<image src="../../static/img/18.png" mode=""></image>
						<text>{{roomDetail.floor}}层</text>
					</view>
					<!-- 是否wifi -->
					<view class="infos-item">
						<image src="../../static/img/16.png" mode=""></image>
						<text v-if="roomDetail.isWife == 2">wifi免费</text>
						<text v-if="roomDetail.isWife == 1">无</text>
					</view>
					<!-- 是否宽带 -->
					<view class="infos-item">
						<image src="../../static/img/17.png" mode=""></image>
						<text v-if="roomDetail.isBand == 2">有线宽带免费</text>
						<text v-if="roomDetail.isBand == 1">无</text>
					</view>
					<!-- <view class="infos-item">
						<image src="../../static/img/14.png" mode=""></image>
						<text>1张大床1.9米</text>
					</view> -->
				</view>
			</view>

			<view class="title">
				其他信息
			</view>
			
			<view class="other-box">
				<view class="other-item">
					<text>费用政策</text>
					<text>{{roomDetail.costInfo}}</text>
				</view>
				<view class="other-item">
					<text>浴池</text>
					<text>{{roomDetail.bathInfo}}</text>
				</view>
				<view class="other-item">
					<text>便利设施</text>
					<text>{{roomDetail.factInfo}}</text>
				</view>
				<view class="other-item">
					<text>媒体科技</text>
					<text>{{roomDetail.meiTiInfo}}</text>
				</view>
				<view class="other-item">
					<text>室外景观</text>
					<text>{{roomDetail.outDoorInfo}}</text>
				</view>
				<view class="other-item">
					<text>食品饮品</text>
					<text>{{roomDetail.footInfo}}</text>
				</view>
				<view class="other-item">
					<text>其他</text>
					<text>{{roomDetail.otherInfo}}</text>
				</view>
			</view>
			
			<view class="pintuan-box">
				<view class="pintuan-top">
					<view class="">
						{{roomDetail.spellList.length}}人正在拼单。可直接参与
					</view>
					<view class="r">
						<text>查看更多</text>
						<image src="../../static/img/7.png" mode=""></image>
					</view>
				</view>
				<view class="pintuan-item"v-for="(item, index) in roomDetail.spellList" :key="index">
					<image class="head" :src="item.headiamge" mode=""></image>
					<view class="info">
						<view class="name">
							<text>{{item.name}}</text>
							<text v-if="item.sex ==2">| 女</text>
							<text v-if="item.sex ==1">| 男</text>
						</view>
						<view class="data">
							<image src="../../static/img/3.png" mode=""></image>
							<text>{{item.startTime.split(' ')[0]}}-{{item.endTime.split(' ')[0]}}</text>
						</view>
					</view>
					<view class="btn1">
						去拼单
					</view>
				</view>
				
			</view>

			
		</view>

		<view class="footer">
			<view class="btn2">
				<text>￥</text>
				<text>900</text>
				<text>立即购买</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		request
	} from '../../static/utils/api.js'
	export default {
		data() {
			return {
				roomDetail: {
					spellList: []
				}
			}
		},
		onLoad() {
			request({
				url: '/api/fanStuProcess/roomInfo',
				method: 'post',
				data: {
					userId: '16e677470fe24e3c89391db8ba8a2f34',
					roomId: 'cdd55015b3b84d55be3572fc623692f6'
				}
			}).then(res => {
				console.log(res);
				this.roomDetail = res.data
			})
		},
		methods:{
			
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f6f7fb;
	}

	.banner {
		width: 100vw;
	}

	.container {
		padding: 0 30rpx 60rpx;
		position: relative;
		top: -60rpx;
		
		.room-info {
			background-color: #fff;
			border-radius: 20rpx;
			padding: 20rpx;

			.room-type {
				font-size: 32rpx;

			}

			.price {
				display: flex;
				justify-content: space-between;
				margin: 10rpx 0;

				.l {
					color: #6684fc;

					text:nth-of-type(1) {
						font-size: 22rpx;
					}

					text:nth-of-type(2) {
						font-size: 28rpx;
						font-weight: 700;
					}
				}

				.r {
					color: #999;
				}
			}

			.infos {
				display: flex;
				flex-wrap: wrap;

				.infos-item {
					flex: 33%;
					display: flex;
					align-items: center;
					margin-top: 20rpx;
					
					image {
						width: 26rpx;
						height: 26rpx;
						margin-right: 10rpx;
					}

					text {
						font-size: 24rpx;
					}
				}

			}

		}

		.title {
			font-size: 40rpx;
			color: #333;
			margin: 30rpx 0;
		}
		.other-box {
			padding: 20rpx;
			background-color: #FFFFFF;
			border-radius: 20rpx;
			.other-item {
				font-size: 30rpx;
				padding: 10rpx 0;
				display: flex;
				text:nth-of-type(1) {
					width: 180rpx;
					color: #999;
					
				}
			}
				
		}
		.pintuan-box {
			background-color: #fff;
			padding: 20rpx;
			border-radius: 20rpx;
			margin-top: 20rpx;
			.pintuan-top {
				font-size: 28rpx;
				
				display: flex;
				justify-content: space-between;
				.r {
					display: flex;
					align-items: center;
					font-size: 24rpx;
					color: #999;
					image {
						width: 20rpx;
						height: 20rpx;
						
						margin-left: 20rpx;
					}
				}
			}
			.pintuan-item {
				display: flex;
				align-items: center;
				padding: 30rpx 0;
				border-bottom: 1px solid #f6f6f6;
				.head {
					width: 90rpx;
					height: 90rpx;
					margin-right: 20rpx;
					border-radius: 50%;
				}
				.info {
					width: 380rpx;
					font-size: 24rpx;
					.name {
						font-size: 30rpx;
						margin-bottom: 6rpx;
						text:nth-of-type(2) {
							font-size: 20rpx;
							color: #b1b6e6;
							margin-left: 10rpx;
						}
					}
						
					.data {
						display: flex;
						align-items: center;
						image {
							width: 26rpx;
							height: 26rpx;
							margin-right: 6rpx;
						}
					}
					
				}
				.btn1 {
					font-size: 26rpx;
					background-color: #6684fc;
					border-radius: 300rpx;
					padding: 5rpx 20rpx;
					color: #FFFFFF;
					
				}
			}
		}
			
	}
	.footer {
		
		position: fixed;
		bottom: 0;
		padding: 10rpx 20rpx;
		background-color: #fff;
		width: 100vw;
		.btn2 {
			color: #FFFFFF;
			font-size: 28rpx;
			background-color: #6684fc;
			padding: 20rpx 0;
			
			border-radius: 300rpx;
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			text:nth-of-type(1) {
				font-size: 24rpx;
			}
			text:nth-of-type(2) {
				font-weight: 700;
				font-size: 32rpx;
			}
			text:nth-of-type(3) {
				color: #ccc;
				margin-left: 20rpx;
			}
		}
	}
	
</style>
